<!--综合态势-->
<template>
    <div class="rightView">
        <transition name="animationRL">
            <div style="display: flex;flex-direction: row" v-show="shows">
                <div style="display: flex;flex-direction: column">
                    <div class="container height295">
                        <div class="container_title1">
                            <span>招商概览</span>
                        </div>
                        <div class="container_pieBox" ref="attractChart"></div>
                    </div>
                    <div class="container height295">
                        <div class="container_title1">
                            <span>安防监控列表</span>
                        </div>
                        <div class="container-table">
                            <div class="container-table-header">
                                <div>设备类型</div>
                                <div>设备总数</div>
                                <div>在线设备</div>
                                <div>离线设备</div>
                            </div>
                            <div class="container-table-subject userFlex" ref="tableContainer" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll">
                                <div
                                    class="container-table-subject-line"
                                    v-for="(item, i) in securityData"
                                    :key="i"
                                >
                                    <div>{{ item.name }}</div>
                                    <div>{{ item.total }}</div>
                                    <div>{{ item.online }}</div>
                                    <div>{{ item.offline }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="display: flex;flex-direction: column">
                    <div class="container height250">
                        <div class="container_title1">
                            <span>空气质量日历</span>
                        </div>
                        <div class="container_calendar">
                            <div class="chart_3_1 flex">
                                <div class="chart_left">
                                    <div class="head flex">
                                        <div
                                            v-for="(item, index) in chart_3_1_head"
                                            class="head_label"
                                            :key="index"
                                        >
                                            {{ item }}
                                        </div>
                                    </div>
                                    <div class="list flex">
                                        <div
                                            v-for="(item, index) in chart_3_1_list"
                                            class="list_label"
                                            :key="index"
                                        >
                      <span v-if="item" :style="{ color: item.color }">{{item.date }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="chart_right">
                                    <div
                                        v-for="(item, index) in chart_3_1_config"
                                        class="config_list flex"
                                        :key="index"
                                    >
                                        <div
                                            class="icon"
                                            :style="{ backgroundColor: item.color }"
                                        ></div>
                                        <div class="label">{{ item.label }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container height322">
                        <div class="container_title1">
                            <span>人员进出数据</span>
                        </div>
                        <div class="container_barBox" ref="yieldChart"></div>
                    </div>
                </div>
            </div>
        </transition>
        <div class="shrink" @click="shows=!shows"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {getAqiDailyData} from "@/monitorApi/axios";
import {getCombined, getListMonitor} from "@/api/synthesis/axios";
import {histogram} from "@/api/axios";

export default {
    name: "floatRight",
    data() {
        return {
            shows: true,
            isScrolling: false,
            tableList: [],
            // 安防监控设备
            securityData:[],
            chart_3_1_head: ["日", "一", "二", "三", "四", "五", "六"],
            chart_3_1_list: [],
            chart_3_1_config: [
                {label: "优", color: "#28CFFE"},
                {label: "良", color: "#41E28F"},
                {label: "轻度", color: "#FB923B"},
                {label: "中度", color: "#FB2459"},
                {label: "重度", color: "#6800A4"},
                {label: "严重", color: "#430303"},
            ],
            //人员进出数据
            outData: '',
            scrollSpeed: 70, // 调整滚动速度，数值越小滚动越快
            scrollInterval: null,
        }
    },
    mounted() {
        // this.initAttract();
        this.getInfoAttract()
        this.init_air_Chart_3_1();
        //人员进出
        this.getCombined()
        // 安防
        this.getMonitor()
        this.startAutoScroll();
    },
    beforeDestroy() {
        this.stopAutoScroll(); // 组件销毁前停止滚动
    },
    methods: {
        stopAutoScroll() {
            clearInterval(this.scrollInterval);
        },
        startAutoScroll() {
            this.stopAutoScroll(); // 首先停止任何现有的滚动
            const container = this.$refs.tableContainer;
            const containerHeight = container.clientHeight;
            const contentHeight = container.scrollHeight;
            let scrollTop = 0;
            const scroll = () => {
                scrollTop += 1;
                if (scrollTop >= contentHeight) {
                    scrollTop = 0;
                }
                container.scrollTop = scrollTop;
            };
            this.scrollInterval = setInterval(scroll, this.scrollSpeed);
        },
        // 安防
        getMonitor() {
            getListMonitor().then((res) => {
                this.tableList = res.data.deviceData
                const deviceDict = {
                    1: "编码设备(Encoder)",
                    3: "报警主机(Alarm Host)",
                    5: "卡口(ANPR)",
                    7: "智能设备(Intelligent Device)",
                    8: "门禁设备",
                    9: "动环设备",
                    10: "梯控设备",
                    11: "IP对讲设备",
                    12: "智能锁",
                    13: "业务库设备",
                    14: "LED设备（报警联动）",
                    15: "水文设备",
                    21: "可视对讲设备",
                    27: "缴费机器人",
                    30: "访客机",
                    35: "出入口设备",
                    36: "道闸设备",
                    37: "显示设备",
                    38: "寻车一体机",
                    40: "快鱼对讲设备",
                    41: "微波阵列设备",
                    45: "显控设备(Video Wall Control)",
                    46: "智能安检设备",
                    47: "话机设备",
                    50: "考勤设备",
                    51: "智慧用电设备",
                    52: "野保相机",
                    62: "智能设备",
                    63: "智慧景区设备",
                    64: "输电装置",
                    65: "灯杆设备",
                    66: "物联感知服务设备",
                    67: "工地设备",
                    68: "NB井盖",
                    70: "升降柱",
                    71: "车底检测",
                    86: "消防视频装置",
                    87: "消防设备",
                    88: "消费设备",
                    89: "小区虚拟设备",
                    90: "NFC设备",
                    91: "审讯主机",
                    92: "扫码设备",
                    93: "运维虚拟设备",
                    94: "辅助设备",
                    95: "智慧制造虚拟设备",
                    96: "监控对象虚拟设备",
                    97: "二维码巡更设备(虚拟设备)",
                    98: "环境类设备",
                    99: "机器人",
                    991: "测试设备大类",
                    992: "测试设备大类2",
                };
                this.securityData =  this.tableList.map((item) => {
                    // Get the corresponding name value from the 'deviceDict' dictionary.
                    const deviceName = deviceDict[item.name] || "Unknown Device"; // Use "Unknown Device" if the name is not found in the dictionary.
                    const sum = item.offline + item.online;
                    // Create a new object with the original properties and the mapped 'name'.
                    return {
                        ...item,
                        name: deviceName,
                        total:sum
                    };
                });

                console.log(this.securityData,'安防')
            });
        },
        getInfoAttract() {
            histogram().then(res => {
                const {xaxis, series} = res;
                let newSeries = series[0]?.datas;
                let seriesArr = []
                xaxis.forEach((item, index) => {
                    seriesArr.push({value: newSeries[index], name: item})
                })
                let newObj = {
                    seriesArr,
                    xaxis
                }
                this.initAttract(newObj)
            })
        },
        //招商概览
        initAttract(response) {
            console.log(response, '5466545646')
            const myEckhart = echarts.init(this.$refs.attractChart);
            let option = myEckhart.getOption();
            if (option != null) {
                myEckhart.clear();
                myEckhart.setOption(option);
            }
            option = {
                tooltip: {
                    trigger: "item",
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                },
                legend: {
                    orient: "horizontal",
                    x: "center",
                    y: "75%",
                    data: response.xaxis,
                    // data:xData,
                    formatter: function (name) {
                        let oa = option.series[0].data;
                        for (let i = 0; i < option.series[0].data.length; i++) {
                            if (name === oa[i].name) {
                                return name + "  " + oa[i].value;
                            }
                        }
                    },
                    textStyle: {
                        color: "#FFFFFF",
                        fontSize:14,
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap:20,
                },
                series: [
                    {
                        name: "项目",
                        type: "pie",
                        radius: "45%",
                        center: ["50%", "35%"],
                        roseType: "radius",
                        color: ["#62B7FF", "#FF832E", "#F64347", "#37F447"],
                        labelLine: {
                            normal: {
                                show: true,
                                length: 10,
                                length2: 10,
                                lineStyle: {
                                    width: 2,
                                },
                            },
                        },
                        label: {
                            normal: {
                                formatter: "{c|{c}}\n{hr|}\n{d|{b}}",
                                rich: {
                                    b: {
                                        fontSize: 12,
                                        color: "#12EABE",
                                        align: "left",
                                        padding: 4,
                                    },
                                    hr: {
                                        borderColor: "#fff",
                                        width: "100%",
                                        borderWidth: 2,
                                        height: 0,
                                    },
                                    d: {
                                        fontSize: 12,
                                        color: "#fff",
                                        align: "left",
                                        padding: 4,
                                    },
                                    c: {
                                        fontSize: 12,
                                        color: "#fff",
                                        align: "left",
                                        padding: 4,
                                    },
                                },
                            },
                        },
                        data: [
                            ...response.seriesArr
                        ],
                    },
                ],
            };

            myEckhart.setOption(option);
        },
        //人员进出数据
        initBar(data) {
            const myEchart = echarts.init(this.$refs.yieldChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            // console.log(data,'人员进出数据')
            let xData = data.map(item => item[0].time);
            let inData = data.map(item => item[0].in);
            // let outData = [data.data[0].out]
            // data.data[0].forEach((item) => {
            //     inData.push(item.in)
            //     outData.push(item.out)
            // })
            console.log(xData, '人员进出数据')
            option = {
                title: {
                    text: "人员进入数据",
                    x: "2%",
                    y:"0%",
                    textStyle: {
                        color: '#fff',
                        fontSize: '14'
                    },
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        type: "shadow",
                    },
                },
                // legend: {
                //     data: ["进入"],
                //     align: "right",
                //     x: "right",
                //     y: "18",
                //     textStyle: {
                //         color: "#fff",
                //     },
                //     itemWidth: 10,
                //     itemHeight: 10,
                //     itemGap: 35,
                // },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "8%",
                    top: "25%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: xData,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.80)",
                                width: 1,
                                type: "solid",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#00c7ff",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位（人）",
                        nameTextStyle: {
                            color: "rgba(255, 255, 255, 0.80)",
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.80)",
                                width: 1,
                                type: "solid",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#063374",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "进入",
                        type: "bar",
                        data: inData,
                        barWidth: 10, //柱子宽度
                        barGap: 1, //柱子之间间距
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "#00E6FF",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 230, 255, 0)",
                                    },
                                ]),
                                opacity: 1,
                            },
                        },
                    },
                ],
            };
            myEchart.setOption(option);
        },
        // 大气监测 空气质量日历
        init_air_Chart_3_1() {
            getAqiDailyData()
                .then((res) => {
                    this.chart_3_1_list = [];
                    if (res.code === "200" && res.data.monthData) {
                        let _data = res.data.monthData.reverse();
                        let firstDate = new Date(_data[0].dateTime).getDay();
                        let beforeLen = firstDate === 0 ? 0 : firstDate;
                        this.chart_3_1_list.length = beforeLen;
                        _data.forEach((item) => {
                            let _date = new Date(item.dateTime).getDate();
                            this.chart_3_1_list.push({
                                date: _date,
                                color: item.aqiColor,
                            });
                        });
                    }
                    console.log(this.chart_3_1_list, "空气质量日历");
                })
                .catch(() => {
                });
        },
        formatDateTime(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        //人员进出
        getCombined() {
            let _this = this
            const now = new Date();
            const startTime = new Date(now.getTime() - 24 * 60 * 60 * 1000); // 24 hours ago
            let params ={
                'startSwingTime': this.formatDateTime(startTime),
                'endSwingTime': this.formatDateTime(now),
            }
            // let body = JSON.stringify({"pageNum": 1, "pageSize": 100})
            getCombined(params).then((res) => {
                _this.initBar(res.data)
            })
        },
    },
    computed: {
        // 滚动条的配置项
        classOption() {
            return {
                step: 0.1, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
}
</script>

<style lang="scss">

@import "src/styles/scrollbar.scss";

.height220 {
    height: 220px;
}

</style>
<style lang="scss" scoped>

.height295 {
    height: 290px;
}

.height250 {
    height: 250px;
}

.height322 {
    height: 330px;
}

.rightView {
    height: 630px;
    float: right;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    z-index: 3;
    cursor: pointer;

    .shrink {
        width: 23px;
        height: 321px;
        background-size: 100% 100%;
        background-image: url("@/assets/icon_shrink_r.png");
    }

    .container {
        width: 296px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_left.png");
        display: flex;
        flex-direction: column;

        &_titleBgc {
            width: 250px;
            height: 3px !important;
            margin-left: 22px;
            background-size: 100% 100%;
            background-image: url("@/assets/bg_title.png");
            z-index: 99;
        }

        &-table {
            width: 250px;
            height: 154px;
            margin-left: 22px;
            margin-top: 10px;
            font-size: 12px;
            font-family: Noto Sans SC-Medium, Noto Sans SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);

            &-header {
                width: 100%;
                height: 20px;
                background: rgba(98, 183, 255, 0.2);
                display: flex;
                justify-content: space-between;
                text-align: center;
                line-height: 20px;

                div {
                    width: 25%;
                }
            }

            &-subject {
                width: 100%;
                height: 200px;

                &-line {
                    width: 100%;
                    height: 30px;
                    margin-top: 8px;
                    margin-bottom: 8px;
                    line-height: 15px;
                    display: flex;
                    justify-content: space-between;
                    text-align: center;

                    div {
                        width: 25%;
                    }
                }
            }
        }

        &_calendar {
            width: 240px;
            height: 200px;
            margin-left: 22px;
        }

        &_pieBox {
            width: 270px;
            height: 250px;
            margin-left: 12px;
        }

        &_barBox {
            width: 240px;
            height: 246px;
            margin-left: 22px;
            margin-top: 30px;
        }

        &_title1 {
            width: 245px;
            height: 36px;
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-left: 22px;
            background-size: 100% 100%;
            background-image: url("@/assets/bg_title3.png");

            span {
                height: 36px;
                font-size: 13px;
                font-family: Source Han Sans SC;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 36px;
                margin-left: 11px;
                background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        &_frameworkTitle {
            cursor: pointer;
            width: 171px;
            height: 23px;
            font-size: 12px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #FFFFFF;
            margin-left: 50px;
            margin-top: 20px;
            margin-bottom: 10px;
            line-height: 23px;
            text-align: center;
            position: relative;
            background-size: 100% 100%;
            background-image: url("@/assets/bg_title2.png");

            &_icon {
                background-size: 100% 100%;
                width: 16px;
                height: 16px;
                background-image: url("@/assets/main/icon_downarr.png");
                position: absolute;
                right: 10px;
                top: 3px;
            }
        }

        &_frameworkContent {
            width: 200px;
            height: 52px;
            margin-left: 23px;
            padding-left: 57px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            background-size: 100% 100%;
            background-image: url("@/assets/bg_framework.png");
        }

        &_frameworkC {
            height: 12px;
            max-width: 180px;;
            font-size: 11px;
            font-family: Microsoft YaHei;
            margin-bottom: 5px;
            font-weight: 400;
            color: #1CFDFF;
            line-height: 12px;
        }

        &_frameworkName {
            height: 12px;
            font-size: 8px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            line-height: 12px;
        }

        &_dynamic {
            display: flex;
            cursor: pointer;
            flex-direction: column;
            align-items: center;
            margin-top: 12px;

            &_img {
                width: 242px;
                height: 119px;
                border: 0px solid #FFFFFF;
                border-radius: 5px;
            }

            &_title {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 8px;
                min-width: 138px;
                max-width: 242px;
                height: 18px;
                font-size: 10px;
                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 18px;
                text-align: center;
                background-size: 100% 100%;
                background-image: url("@/assets/bg_title2.png");
            }
        }
    }
}

.seamlessStyle {
    height: 220px;
    overflow: hidden;
}

.loginRateStyle {
    width: 100%;
    height: 200px;
}

.paymentStyle {
    width: 100%;
    height: 270px;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.chart_3_1 {
    align-items: start;
    margin-top: 10px;
    //width: 260px;
    .chart_left {
        width: 230px !important;
        height: 180px;

        .head {
            justify-content: start;

            .head_label {
                width: 28px;
                height: 10px;
                text-align: center;
                line-height: 10px;
                font-size: 5px;
                color: #00FFC1;
                margin-top: 10px;
            }
        }

        .list {
            flex-wrap: wrap;
            align-items: start;
            justify-content: start;

            .list_label {
                width: 28px;
                height: 10px;
                text-align: center;
                line-height: 10px;
                font-size: 5px;
                color: #ffffff;
                margin-top: 10px;
            }
        }
    }

    .chart_right {
        margin-top: 10px;
        margin-left: 10px;

        .config_list {
            align-items: center;
            justify-content: start;
            height: 14px;
            width: 40px;

            .icon {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
            }

            .label {
                margin-left: 3px;
                font-size: 5px;
                color: rgba(255, 255, 255, 0.6);
            }
        }
    }
}

@media screen and (min-width: 2000px) and (max-width: 3000px) {
    $width_2k: 1920;
    $height_2k: 1080;
    $width: 4000;
    $height: 1486;
    $unit: px;
    @function calWidth_2k($pixel) {
        @return $width_2k*$pixel/$width;
    }
    @function calHeight_2k($pixel) {
        @return $pixel/1.8*2.7;
    }
    @function calFont_2k($pixel) {
        @return $height_2k*$pixel/$height;
    }

    .height220 {
        height: calHeight_2k(220px);
    }

    .height295 {
        height: calHeight_2k(295px);
    }

    .height250 {
        height: calHeight_2k(250px);
    }

    .height322 {
        height: calHeight_2k(340px);
    }

    .rightView {
        height: calHeight_2k(630px);
        margin-top: calHeight_2k(20px);

        .shrink {
            height: calHeight_2k(321px);
        }

        .container {
            &-table {
                height: calHeight_2k(154px);
                margin-top: calHeight_2k(10px);

                &-header {
                    height: calHeight_2k(20px);
                    line-height: calHeight_2k(20px);
                }

                &-subject {
                    height: calHeight_2k(200px);

                    &-line {
                        height: calHeight_2k(30px);
                        margin-top: calHeight_2k(8px);
                        margin-bottom: calHeight_2k(8px);
                    }
                }
            }

            &_title1 {
                height: calHeight_2k(36px);
                margin-top: calHeight_2k(36px);

                span {
                    height: calHeight_2k(36px);
                    line-height: calHeight_2k(36px);
                }

            }

            &_calendar {
                height: calHeight_2k(200px);
            }

            &_pieBox {
                height: calHeight_2k(250px);
            }

            &_barBox {
                height: calHeight_2k(246px);
                margin-top: calHeight_2k(30px);
            }

            &_frameworkTitle {
                height: calHeight_2k(23px);
                margin-top: calHeight_2k(20px);
                margin-bottom: calHeight_2k(10px);
                line-height: calHeight_2k(23px);

                &_icon {
                    top: calHeight_2k(6px);
                }

            }

            &_frameworkContent {
                height: calHeight_2k(52px);
                width: calHeight_2k(200px);

            }

            &_frameworkC {
                height: calHeight_2k(12px);
                margin-bottom: calHeight_2k(5px);
                line-height: calHeight_2k(12px);
            }

            &_frameworkName {
                height: calHeight_2k(12px);
                line-height: calHeight_2k(12px);
            }

            &_dynamic {
                margin-top: calHeight_2k(12px);

                &_img {
                    height: calHeight_2k(119px);
                }

                &_title {
                    margin-top: calHeight_2k(8px);
                    height: calHeight_2k(18px);
                    line-height: calHeight_2k(18px);
                }
            }
        }
    }
    .chart_3_1 {
        margin-top: calHeight_2k(10px);
        .chart_left {
            height: calHeight_2k(180px);

            .head {
                .head_label {
                    height: calHeight_2k(10px);
                    line-height: calHeight_2k(10px);
                    margin-top: calHeight_2k(10px);
                }
            }

            .list {

                .list_label {
                    height: calHeight_2k(10px);
                    line-height: calHeight_2k(10px);
                    margin-top: calHeight_2k(10px);
                }
            }
        }

        .chart_right {
            margin-top: calHeight_2k(10px);

            .config_list {
                height: calHeight_2k(14px);

                .icon {
                    height: calHeight_2k(4px);
                }
            }
        }
    }
    .seamlessStyle {
        height: calHeight_2k(220px);
    }

    .loginRateStyle {
        height: calHeight_2k(200px);
    }

    .paymentStyle {
        height: calHeight_2k(270px);
    }

}

@media screen and (min-width: 1000px) and (max-width: 1999px) {
    $width_2k: 1920;
    $height_2k: 1080;
    $width: 4000;
    $height: 1486;
    $unit: px;
    @function calWidth_2k($pixel) {
        @return $width_2k*$pixel/$width;
    }
    @function calHeight_2k($pixel) {
        @return $pixel/1.8*2.7;
    }
    @function calFont_2k($pixel) {
        @return $height_2k*$pixel/$height;
    }

    .height220 {
        height: calHeight_2k(220px);
    }

    .height295 {
        height: calHeight_2k(295px);
    }

    .height250 {
        height: calHeight_2k(250px);
    }

    .height322 {
        height: calHeight_2k(340px);
    }

    .rightView {
        height: calHeight_2k(630px);
        margin-top: calHeight_2k(20px);

        .shrink {
            height: calHeight_2k(321px);
        }

        .container {

            &_title1 {
                height: calHeight_2k(24px);
                margin-top: calHeight_2k(15px);

                span {
                    height: calHeight_2k(24px);
                    line-height: calHeight_2k(24px);
                }

            }

            &_frameworkTitle {
                height: calHeight_2k(23px);
                margin-top: calHeight_2k(20px);
                margin-bottom: calHeight_2k(10px);
                line-height: calHeight_2k(23px);

                &_icon {
                    top: calHeight_2k(6px);
                }

            }

            &_frameworkContent {
                height: calHeight_2k(40px);
                width: calHeight_2k(140px);
                margin-left: calHeight_2k(10px);
                padding-left: calHeight_2k(40px);
            }

            &_frameworkC {
                height: calHeight_2k(12px);
                margin-bottom: calHeight_2k(5px);
                line-height: calHeight_2k(12px);
            }

            &_frameworkName {
                height: calHeight_2k(12px);
                line-height: calHeight_2k(12px);
            }

            &_dynamic {
                margin-top: calHeight_2k(12px);

                &_img {
                    height: calHeight_2k(119px);
                }

                &_title {
                    margin-top: calHeight_2k(8px);
                    height: calHeight_2k(18px);
                    line-height: calHeight_2k(18px);
                }
            }
        }
    }

    .seamlessStyle {
        height: calHeight_2k(220px);
    }

    .loginRateStyle {
        height: calHeight_2k(200px);
    }

    .paymentStyle {
        height: calHeight_2k(270px);
    }
}
</style>
